<template>
	<view class="page">
		<!-- 自定义头部 navbar -->
		<u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack"
			:background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false"
			:is-back="pageStatus != 'home'"></u-navbar>

		<!-- logo -->
		<view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' || pageStatus == 'loginByCode'">
			<image class="logo" src="../../static/app/logo.png"></image>
			<view class="app-name">Chat ME</view>
		</view>

		<!-- 默认登录页面显示 -->
		<view style="width: 100%;" v-if="pageStatus == 'home'">
			<view class="text-area" @click="loginByWx" v-if="osType == 'wechat'">微信登录</view>
			<view class="loginSmsCode" v-if="osType == 'android'">
				<u-form :model="loginCodeForm" ref="loginCodeForm">
					<u-form-item :border-bottom="true">
						<u-input v-model="loginCodeForm.phone" placeholder="请输入手机号,无对应手机号将直接创建"
							:placeholder-style="{ color: '#ccc', fontSize: '30rpx' }" />
					</u-form-item>
					<u-form-item :border-bottom="true">
						<u-input v-model="loginCodeForm.password" placeholder="请输入密码" 
							:placeholder-style="{ color: '#ccc', fontSize: '30rpx' }" />
					</u-form-item>
				</u-form>
				<view class="text-area" @click="loginByPassword">账号密码登录</view>
			</view>
			
			<view class="login" @click="loginByCode">手机号登录/注册</view>
		</view>

		<!-- 微信授权登录，获取用户信息 -->
		<view style="width: 100%;" v-if="pageStatus == 'getWxRole'">
			<view class="info">为提供优质服务,需要获取你的以下信息 :</view>
			<view class="public">
				<view class="public-dot"></view>
				<view class="public-text">你的公开信息(头像、昵称等)</view>
			</view>
			<view class="text-enter" @click="getWxLoginRole">授权进入</view>
		</view>

		<!-- 微信登录小程序，再授权获取用户信息之后 -->
		<view class="loginWx" v-if="pageStatus == 'loginByWx'">
			<view class="title">欢迎使用 Shop Weapp</view>
			<view class="desc">立即登录享受优质服务</view>
			<view class="avatar">
				<image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image>
			</view>
			<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">微信用户一键登录</u-button>
		</view>

		<!-- 手机号验证码登录 -->
		<view class="loginSmsCode" v-if="pageStatus == 'loginByCode'">
			<u-form :model="loginCodeForm" ref="loginCodeForm">
				<u-form-item :border-bottom="true">
					<u-input v-model="loginCodeForm.phone" placeholder="请输入手机号"
						:placeholder-style="{ color: '#ccc', fontSize: '30rpx' }" />
				</u-form-item>
				<u-form-item :border-bottom="true">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<u-input style="width: 60%;" v-model="loginCodeForm.smsCode" placeholder="请输入验证码"
							:placeholder-style="{ color: '#ccc', fontSize: '30rpx' }" />
						<view class="smscode" @click="getCode" v-if="!codeOPS.isGetting">
							{{ codeOPS.getted ? '重新获取验证码' : '获取验证码' }}</view>
						<view class="smscode" v-else>{{ codeOPS.countDownTime }}s</view>
					</view>
				</u-form-item>
			</u-form>
			<view style="padding-top:64rpx">
				<u-button :disabled="!loginCodeForm.phone || !loginCodeForm.smsCode" type="primary" shape="circle"
					@click="loginByPhone">验证码登录</u-button>
			</view>
		</view>

		<!-- 协议勾选 -->
		<view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' || pageStatus == 'loginByCode'">
			<view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag">
				<image src="../../static/operate/check.png"></image>
			</view>
			<view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag">
				<image src="../../static/operate/checked.png"></image>
			</view>
			<view class="agree_text">
				登录代表您已同意
				<span>《用户服务协议》《隐私权政策》</span>
			</view>
		</view>
	</view>
</template>

<script>
	import FunUniappTheme from '@/theme.scss';
	const app = getApp();
	export default {
		data() {
			return {
				// 页面状态，默认为 home
				// getWxRole：获取微信权限页，loginByWx：微信授权登录页
				// loginByCode：手机号+验证码登录页，loginByPwd：手机号+密码登录
				// forgetPwd：找回密码页面，resetPwd，重置密码页面
				pageStatus: 'home',
				// 协议是否勾选
				agree_flag: true,
				// 微信授权的用户信息
				wxLoginUserInfo: {},
				// openid
				openId: '',
				// 系统内用户信息
				userInfo: {},
				// 手机号验证码登录表单
				loginCodeForm: {
					phone: 18820041590,
					smsCode: 1234,
					password: 123456,
					uuid: null
				},
				osType: app.globalData.osType,
				// 表单验证
				loginCodeFormRules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					password:[{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						}
					],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}]
				},
				// 获取验证码倒计时
				codeOPS: {
					countDownTime: 60,
					isGetting: false,
					getted: false,
					timer: null
				},
			};
		},
		onLoad() {
			console.log(FunUniappTheme);
		},
		onReady() {
			if (this.pageStatus == 'loginByCode' || this.osType=='android') {
				this.$refs.loginCodeForm.setRules(this.loginCodeFormRules);
			}
		},
		methods: {
			// 勾选/取消用于协议
			changeAgreeFlag() {
				this.agree_flag = !this.agree_flag;
			},

			// 微信登录
			loginByWx() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.pageStatus = 'getWxRole';
			},

			// 自定义navbar的返回方法
			navbarBack() {
				if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' || this.pageStatus == 'loginByCode') {
					this.pageStatus = 'home';
				} else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {
					this.pageStatus = 'loginByPwd';
				} else if (this.pageStatus == 'loginByPwd') {
					this.pageStatus = 'loginByCode';
				}
			},

			// 微信授权
			getWxLoginRole() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.getUserInfoByWx(() => {
					this.getWxCode(code => {
						this.getOpenId(code, res => {});
					});
				});
			},

			// 基于uni的获取code方法
			getWxCode(callBack) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						callBack(loginRes.code);
					},
					fail(e) {}
				});
			},

			// 获取openId
			getOpenId(code, callBack) {
				this.$u.api.getOpenId(code).then(res => {
					uni.setStorageSync('OPEN_ID', res.openid);
					callBack(res);
				});
			},

			// 获取个人信息
			getUserInfoByWx(callBack) {
				let $this = this;
				uni.getUserProfile({
					desc: '获取你的昵称、头像',
					success: function(data) {
						uni.setStorageSync({
							key: 'APP_WX_USERINFO',
							data: data
						});
						$this.wxLoginUserInfo = data;
						$this.pageStatus = 'loginByWx';
						callBack();
					},
					fail: function(error) {}
				});
			},

			// 获取手机号回调
			decryptPhoneNumber(e) {
				uni.showModal({
					title: '提示',
					content: '由于没有企业认证，无法获取手机号，开发模式先暂时放开登录入口',
					complete: () => {
						uni.setStorageSync('IS_LOGIN', true);
						uni.reLaunch({
							url: '/pages/home/index'
						});
					}
				});
			},

			// 微信小程序手机号登录
			loginByOpenId() {
				const openid = uni.getStorageSync('OPEN_ID');
				this.$u.api.loginByOpenId(openid).then(res => {
					this.userInfo = res;
					this.loginSuccess()
				});
			},

			// 手机号+验证码登录
			loginByCode() {
				this.pageStatus = 'loginByCode';
			},

			// 获取验证码
			getCode() {
				if (!this.loginCodeForm.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return;
				}
				uni.showLoading({
					title: '正在获取验证码'
				});
				this.$u.api.getSmsCode(this.loginCodeForm.phone).then(res => {
					this.loginCodeForm.uuid = res.uuid
				});
				uni.hideLoading();
				this.codeOPS.isGetting = true;
				this.codeOPS.getted = true;
				this.codeOPS.timer = setInterval(() => {
					if (this.codeOPS.countDownTime > 0 && this.codeOPS.countDownTime <= 60) {
						this.codeOPS.countDownTime--;
					} else {
						this.resetCountDown(false);
					}
				}, 1000);
			},

			// 倒计时初始化
			resetCountDown(isInit) {
				clearInterval(this.codeOPS.timer);
				this.codeOPS = {
					countDownTime: 60,
					isGetting: false,
					getted: isInit ? false : true,
					timer: null
				};
				this.$forceUpdate();
			},

			// 手机号登录方法，分为验证码和密码两种
			loginByPhone(type) {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				if (!this.loginCodeForm.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return;
				}
				if (!this.loginCodeForm.smsCode) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					});
					return;
				}
				uni.showLoading({
					title: '正在登录'
				});
				this.$u.api.loginByPhone({...this.loginCodeForm,mobile:this.loginCodeForm.phone}).then(res => {
					
					uni.setStorageSync('IS_LOGIN', true);
					uni.setStorageSync('APP_USER_TOKEN',res.token)
					this.loginSuccess()
					uni.reLaunch({
						url: '/pages/home/index'
					});
				});
				uni.hideLoading();
			},
			loginByPassword(type) {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				if (!this.loginCodeForm.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return;
				}
				if (!this.loginCodeForm.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return;
				}
				uni.showLoading({
					title: '正在登录'
				});
				this.$u.api.loginByPassword({...this.loginCodeForm,username:this.loginCodeForm.phone}).then(res => {
					console.log(res)
					if(res==undefined){
						this.$u.api.registerAndLogin({...this.loginCodeForm,username:this.loginCodeForm.phone}).then(res2 => {
							console.log(res2)
							if(res2){
								uni.setStorageSync('IS_LOGIN', true);
								uni.setStorageSync('APP_USER_TOKEN',res2.token)
								this.loginSuccess()
								uni.reLaunch({
									url: '/pages/home/index'
								});
							}
						})
					}else{
						uni.setStorageSync('IS_LOGIN', true);
						uni.setStorageSync('APP_USER_TOKEN',res.token)
						this.loginSuccess()
						uni.reLaunch({
							url: '/pages/home/index'
						});
					}
					
					
				});
				uni.hideLoading();
			},
			loginSuccess() {
			  // 设置用户信息
			  this.$u.api.getUserInfo().then(res=>{
				  const user = res.user
				  const avatar = (user == null || user.avatar == "" || user.avatar == null) ? require("@/static/user/profile.jpg") : baseUrl + user.avatar
				  const username = (user == null || user.userName == "" || user.userName == null) ? "" : user.userName
				  if (res.roles && res.roles.length > 0) {
					  uni.setStorageSync('USER_ROLES',  res.roles);
					  uni.setStorageSync('USER_PERMISSIONS', res.permissions);
				  } else {
					  uni.setStorageSync('USER_ROLES',  ['ROLE_DEFAULT']);
				  }
				  uni.setStorageSync('USER_NAME',  username);
				  uni.setStorageSync('USER_AVATAR',  avatar);
			  });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 40rpx;
		background-color: $app-theme-bg-color;
	}

	.logo-wrap {
		display: flex;
		justify-content: center;
		padding-top: 100rpx;
		padding-bottom: 240rpx;
		flex-wrap: wrap;

		.logo {
			height: 220rpx;
			width: 220rpx;
		}

		.app-name {
			width: 100%;
			padding-top: 40rpx;
			text-align: center;
			font-size: 44rpx;
			font-weight: 500;
			color: $app-theme-text-black-color;
		}
	}

	.text-area {
		width: 100%;
		height: 96rpx;
		background: $app-theme-color;
		font-weight: 400;
		border-radius: 56rpx;
		color: $app-theme-text-white-color;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
		/* background: url(../../static/img/logo_newhope.png); */
	}

	.info {
		font-size: 28rpx;
		font-weight: 400;
		color: $app-theme-text-black-color;
		line-height: 28rpx;
		margin-top: 180rpx;
	}

	.public {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.public-dot {
			width: 6rpx;
			height: 6rpx;
			background: #999999;
			margin-right: 10rpx;
		}

		.public-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #8f92a1;
			line-height: 24rpx;
		}
	}

	.text-enter {
		width: 100%;
		margin-top: 50rpx;
		height: 96rpx;
		background: $app-theme-color;
		font-weight: 400;
		border-radius: 56rpx;
		color: #ffffff;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.head {
		margin-top: 70rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.back {
		width: 40rpx;
		height: 40rpx;
	}

	.login {
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: $app-theme-color;
		line-height: 32rpx;
		margin-top: 48rpx;
	}

	.agree {
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 66rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agree_img image {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
	}

	.agree_text {
		margin-left: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #8f92a1;
		line-height: 24rpx;
		display: flex;
		align-items: center;

		span {
			color: $app-theme-color;
		}
	}

	.loginWx {
		width: 100%;
		padding-top: 64rpx;

		.title {
			text-align: left;
			font-size: 22px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #171717;
			line-height: 30px;
			margin-bottom: 12rpx;
		}

		.desc {
			text-align: left;
			font-size: 14px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #8f92a1;
			line-height: 14px;
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;
			overflow: hidden;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 128rpx auto 160rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.loginSmsCode {
		width: 100%;
	}

	.smscode {
		font-size: 28rpx;
		font-family: PingFang-SC-Regular, PingFang-SC;
		font-weight: 400;
		color: $app-theme-color;
		line-height: 28rpx;
	}
</style>